<script setup lang="ts">
import { reactive, watch } from 'vue';
import { PassiveHealthCheckConfig } from '../../services/client';
import TimeSpanSelect from '../basic/TimeSpanSelect.vue';
import ClusterConfigConstants from '../../constants/ClusterConfigConstants'

const props = defineProps<{column?: number}>();
const model = defineModel<PassiveHealthCheckConfig>({ required: true });
const modelValue = reactive(model.value);
watch(modelValue, (value) => {
    model.value = value;
})
</script>

<template>
    <ElDescriptions :column="props.column" border style="width: 100%;">
        <ElDescriptionsItem label="Enabled">
            <ElSwitch v-model="modelValue.enabled" />
        </ElDescriptionsItem>
        <ElDescriptionsItem label="Policy">
            <ElSelect v-model="modelValue.policy">
                <ElOption v-for="(policy, index) in ClusterConfigConstants.HealthCheck.Passive.Policies" :key="index" :label="policy" :value="policy">
                </ElOption>
            </ElSelect>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="Reactivation Period">
            <TimeSpanSelect v-model="modelValue.reactivationPeriod" clearable></TimeSpanSelect>
        </ElDescriptionsItem>
    </ElDescriptions>
</template>
